<template>
    <view class="pop" @touchmove.stop.prevent>
        <text class="pop-title">优惠券</text>

        <view class="pop-top-wrap">
            <text style="font-size: 28upx;color: #131313;font-weight: bold;" :style="{color:(selectUse==0?'#009B01':'#131313')}" @click="selUse(0)">可用优惠券（{{canuselist.length}}）</text>
            <text style="margin-left: 64upx;font-size: 28upx;color: #131313;font-weight: bold;" :style="{color:(selectUse==1?'#009B01':'#131313')}" @click="selUse(1)">不可用优惠券（{{nouselist.length}}）</text>
        </view>

        <view style="height: 40upx;font-size: 24upx;color: #333333;margin: 25upx 0 0;">
            <text v-if="selectUse===0 && tempSelect>=0">
                已选中优惠券，使用优惠券1张，共抵扣￥{{tempDiscount}}
            </text>
        </view>

        <view style="height: 25upx;"></view>

        <scroll-view scroll-y="true" style="height: 500upx;">
            <template v-if="couponList.length > 0">
                <view class="coupon-item" v-for="(item, index) in couponList" :key="index" @click="couponItemclick(index, item)">
                    <view v-if="selectUse===0">
                        <u-icon name="checkmark-circle-fill" color="#333333" v-if="tempSelect === index"></u-icon>

                        <u-icon name="checkmark-circle" color="#333333" v-else></u-icon>
                    </view>
                    <view class="wrap">
                        <view class="content">
                            <view class="leftContent">
                                <view class="amount">
                                    <view class="couponAmount">
                                        <text class="amount_unit">¥</text>
                                        <text class="realAmount">{{item.money}}</text>
                                    </view>
                                    <text class="useInfo">满{{item.conditionMoney}}可用</text>
                                </view>
                                <view class="contentInfo">
                                    <text class="activity-name">{{filterNull(item.couponName)}}</text>
                                    <text class="time">{{filterNull(item.preferentialInfo)}}</text>
                                    <view class="useType" @click="changeDesc">
                                        <!-- <text class="conponType">{{item.useType === 1?'全场通用 ':'指定类型'}}</text> -->
                                        <text class="conponType">{{item.useTypeName}}</text>
                                        <image v-if="false" class="arrow" src="/static/coupon/coupon_up.png" mode=""></image>
                                    </view>
                                </view>
                            </view>
                            <view class="rightContent">
                                <!-- <text class="conponType1">{{rentType|rentTypeText}}</text> -->
                                <text class="conponType1">{{schemeTypeStr}}</text>
                            </view>
                        </view>
                        <image class="cover" src="/static/mine/coupon-bg.png" mode="scaleToFill"></image>
                    </view>
                </view>
            </template>
            <template v-else>
                <u-empty mode="coupon" text="暂无优惠券" />
            </template>
        </scroll-view>
        <!-- <button class="pop-btn" @click="commitCoupon">确定</button> -->
    </view>
</template>

<script>
import get from 'lodash/get';
import filter from 'lodash/filter';
import isEmpty from 'lodash/isEmpty';
import findIndex from 'lodash/findIndex';
import * as BaseApi from '@/common/api';

export default {
    filters:{
         rentTypeText(rentType) {
            // 租赁类型：1、经租 2、以租代购 3、展示车 4、试用车 5、融租 6、直购
            return { 1: "经租", 2: "以租代购", 3: "展示车", 4: "试用车", 5: "融租", 6: "直购", }[rentType];
        },
    },
    props: {
        feeItems: {
            type: Array,
        },
        rentType: {
            type: Number,
        },
        carModelId: {
            type: String,
        },
        schemeTypeStr: {
            type: String,
        },
        coupon: {
            type: Object,
            default() {
                return {
                    "memberId": "", // 	客户优惠券id,
                    "couponName": "", // 优惠券名称,
                    "money": "", // 优惠金额,
                    "conditionMoney": "", // 满减金额,
                    "preferentialInfo": "", // 优惠券信息,
                    "useType": "", // 使用类型（1.全场通用 2.指定类型）,
                    "useTypeNo": "", // 使用类型编号,
                    "useTypeName": "", // 使用类型名称,
                }
            },
        },
    },
    data() {
        return {
            couponList: [], //当前展示的列表
            canuselist: [], //可用列表
            nouselist: [], //不可用列表
            discountIndex: -1, //选定的优惠券索引
            selectUse: 0, //0可用 1不可用
            tempSelect: -1, //暂时选择得优惠券索引
        };
    },
    computed: {
        deptId() {
            return this.$store.state.user.deptId;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
        //暂时选择的优惠券金额
        tempDiscount() {
            return get(this.canuselist, `${this.tempSelect}.money`, 0);
        },
    },
    async mounted() {
        this.canuselist = await this.getList(1); // 获取可用列表
        this.nouselist = await this.getList(2); // 获取不可用列表
        this.couponList = this.canuselist; // 默认显示可用列表
        this.tempSelect = findIndex(this.couponList, { 'memberId': this.coupon.memberId }); // 设置已选择优惠券
    },
    methods: {
        async getList(available = 1) {
            try {
                const result = await BaseApi.payOrderCoupon({
                    pageNo: 1, // 页码
                    pageNum: 10000, // 每页条目
                    orderType: 1, // 调用类型：1 下单，2 账单支付
                    memberNo: this.userInfo.customerId, // 当前登录人编号
                    unitno: this.deptId, // 单位编号（门店）
                    itemNo: this.carModelId, // 指定项目（车型）
                    rentType: this.rentType, // 租赁类型：1、经租 2、以租代购 3、展示车 4、试用车 5、融租 6、直购
                    available: available, // 优惠券是否可用 1 可用 2 不可用
                    downPayment: get(filter(this.feeItems, val => val.type == 'down_payment'), '0.amount'), // 首付款
                    monthlyRent: get(filter(this.feeItems, val => val.type == 'monthly_rent'), '0.amount'), // 月租金
                    balance: get(filter(this.feeItems, val => val.type == 'balance_payment'), '0.amount'), // 尾款
                    deposit: get(filter(this.feeItems, val => val.type == 'cash_deposit'), '0.amount'), // 保证金
                    servicingFee: get(filter(this.feeItems, val => val.type == 'servicing_fee'), '0.amount'), // 整备费
                });
                return isEmpty(result) ? [] : result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
                return [];
            }
        },
        //优惠券切换（有用-无用）
        selUse(index) {
            this.selectUse = index;
            if (0 === index) {
                this.couponList = this.canuselist
            } else {
                this.couponList = this.nouselist
            }
        },
        //优惠券条目点击
        couponItemclick(index, item) {
            if (this.selectUse === 0) {
                if (this.tempSelect == index) {
                    this.tempSelect = -1; // 取消选择
                    this.$emit('selected', {});
                } else {
                    this.tempSelect = index; // 选择
                    this.$emit('selected', item);
                }
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.top-status {
    height: 130upx;
    background-color: $green12;
    text-align: center;

    text {
        font-size: 36upx;
        color: $white;
        font-weight: bold;
        line-height: 130upx;
    }
}

.tenacy {
    font-size: 24upx;
    color: $yellowffc;
    padding: 3upx 8upx;
    border-radius: 8upx;
    border: 2upx solid $yellowffc;
    margin-left: 20upx;
}

.phone {
    width: 30upx;
    height: 30upx;
    margin-left: 10upx;
}

.insurance-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    margin: -10upx 0 20upx 20upx;

    text {
        @include flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 10upx 10upx 0 0;
        padding: 5upx 10upx;
        border-radius: 6upx;
        border: solid $graya7 2upx;
        font-size: 24upx;
        color: $black33;
    }
}

.fee-list {
    @include flex(column);
    padding: 0 20upx;

    .fee-item {
        @include flex;
        align-items: center;
        height: 70upx;
        justify-content: space-between;

        text {
            font-size: 24upx;
            color: $black33;
        }
    }
}

.coupon-wrap {
    @include flex;
    align-items: center;
    height: 95upx;
    padding: 0 40upx;

    &-title {
        flex-grow: 1;
        font-size: 28upx;
        color: $black33;
        font-weight: bold;
    }

    &-sel {
        font-size: 28upx;
        color: $black33;
        font-weight: bold;
    }
}

.pop {
    @include flex(column);
    padding: 30upx 50upx;

    .pop-title {
        font-size: 34upx;
        color: $black13;
        font-weight: bold;
        margin-top: -40upx;
    }

    &-top-wrap {
        display: flex;
        margin-top: 58upx;
    }

    .coupon-item {
        @include flex;
        align-items: center;
    }

    .pop-btn {
        width: 100%;
        height: 70upx;
        line-height: 70upx;
        border-radius: 14upx;
        background-color: $green12;
        text-align: center;
        color: $white;
        margin-top: 30upx;
        font-size: 32upx;
        font-weight: bold;
        letter-spacing: 5upx;
    }
}

.bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 2;
}

.wrap {
    // position: relative;
    // padding: 0upx 20upx;
    max-height: 600upx;
}

.cover {
    width: 643upx;
    height: 231upx;
    line-height: 231upx;
}

.content {
    position: relative;
    display: flex;
    // margin-top: 26upx;

    .leftContent {
        display: flex;
        position: absolute;
        top: 0;
        left: 22upx;
        justify-content: center;

        .amount {
            display: flex;
            width: 216upx;
            height: 190upx;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .couponAmount {
                display: flex;
                align-items: flex-start;
            }
        }

        .contentInfo {
            display: flex;
            flex-direction: column;
            width: 244upx;

            .useType {
                display: flex;
                margin-top: 15upx;
                justify-content: space-between;
                align-items: center;
            }
        }
    }

    .rightContent {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 174upx;
        position: absolute;
        top: 0;
        right: 0;
    }
}

.amount_unit {
    position: relative;
    top: 15upx;
}

.realAmount {
    font-size: 67upx;
    font-weight: bold;
    font-family: Eras Bold ITC, Eras Bold ITC-Regular;
    color: #333;
    text-align: center;
    // letter-spacing: -11upx;
}

.useInfo {
    // margin-top: 5upx;
    font-size: 21upx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: bold;
    color: #333;
}

.activity-name {
    margin-top: 40upx;
    color: #333;
    font-size: 20upx;
    font-weight: bold;
    font-family: PingFang SC, PingFang SC-Bold;
}

.time {
    margin-top: 40upx;
    color: #666;
    font-size: 16upx;
}

.conponType {
    font-size: 20upx;
    color: #666;
}

.arrow {
    width: 18upx;
    height: 18upx;
    margin-right: 48upx;
}

.conponType1 {
    color: #666;
    font-size: 22upx;
    margin-top: 24upx;
}

.button {
    width: 180upx;
    height: 56upx;
    line-height: 56upx;
    background: linear-gradient(0deg, #333333 0%, #614c2c 100%);
    border-radius: 28upx;
    text-align: center;
    font-size: 24upx;
    color: #fffdc2;
}
</style>
